<template>
  <div>
    <!--条件筛选-->
    <TopFilter ref="topFilter" :list="topFilterList" :cols="3" labelWidth="110" @filterChange="changeHandle" @onCollapse="collapseHandle"></TopFilter>
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'records'"
      :isSelectColumn="true"
      selectionType="single"
      :onRowSelectChange="selectChange"
      columnsRef="jzySeries"
      :onColumnsChange="columns => this.columns = columns"
    >
    </FilterTable>
    <div class="dialogBottmView" >
      <el-button @click="closeDrawer(1)">关 闭</el-button>
      <el-button :loading="isSave" @click="closeDrawer(2)" type="primary">确 定</el-button>
    </div>
  </div>
</template>

<script>
  import { dictionary } from '@/utils/dictMixin';
  import { region } from '@/api/cms-common/region';
  import {getlist} from '@/api/customerService/complaint/complaintbill/index.js';
  export default {
    mixins: [dictionary,region],
    name: 'workorder',
    props: {
      rowData: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      this.saveData=null;
      return {
        columns: this.createTableColumns(),
        fetchParams: {vin:''},
        topFilterList: this.createTopFilterList(),
        fetchApi:getlist,
        isSave:false,
        records:'',
        rowSelectData:[],//选中的配件
        saveLoading: false,
      };
    },
    created() {
      if (this.rowData.carvin){
        this.fetchParams.vin=this.rowData.carvin
      }
    },
    methods: {
      createTopFilterList(){
        return [
          {
            type: 'INPUT',
            label: '工单号',
            fieldName: 'roNo'
          },
          {
            type: 'INPUT',
            label: 'VIN',
            fieldName: 'vin'
          }
        ]
      },
      collapseHandle() {
        this.$nextTick(() => {
          this.BaseTable.EXECUTE_RESET_HEIGHT();
        });
      },
      changeHandle(val) {
        this.fetchParams = Object.assign({}, val);
      },
      closeDrawer(type){
        if(type===1){
          this.$emit('close')
        }else{
          let params= this.rowSelectData
          this.$emit('close',params)
        }
      },
      selectChange(val) {
        this.rowSelectData = val;
      },
      createTableColumns () {
        return [
          {
            title: '序号',
            dataIndex: 'index',
            width: 70,
            sorter: true,
            render: props => {
              return <span>{props.row.index + 1}</span>;
            }
          },
          {
            title: '工单号',
            dataIndex: 'roNo',
            sorter: true,
          },
          {
            title: '经销商代码',
            dataIndex: 'ownerCode',
            sorter: true,
          },
          {
            title: 'VIN',
            dataIndex: 'vin',
            sorter: true,
          },
          {
            title: '工单状态',
            dataIndex: 'roStatus',
            sorter: true,
            render: props => {    //编码转汉字
              return <span>{this.createDictText(props.row.roStatus, '8049')}</span>;
            }
          },
          {
            title: '客户名称',
            dataIndex: 'ownerName',
            sorter: true,
          },
          {
            title: '车牌号',
            dataIndex: 'license',
            sorter: true,
          },
          {
            title: '维修类型',
            dataIndex: 'roType',
            sorter: true,
            dictItems:[]
          },
          {
            title: '开单日期',
            dataIndex: 'roCreateDate',
            sorter: true,
            filter: true,
            dateFormat: 'yyyy-MM-dd HH:mm:ss',
            showOverflowTooltip: true,
            filterType: 'date-range'
          },
          {
            title: '结算日期',
            dataIndex: 'forBalanceTime',
            sorter: true,
            filter: true,
            dateFormat: 'yyyy-MM-dd HH:mm:ss',
            showOverflowTooltip: true,
            filterType: 'date-range'
          },
        ]
      },
    }
  };
</script>

<style scoped>

</style>
